x`
<template>
  <h1>就诊信息</h1>
  <el-row :gutter="10">

    <!--    <el-col :span="6">
          <el-input v-model="query.employeeData.name" placeholder="请输入员工姓名" style="width: 200px;" />
        </el-col>

        <el-col :span="6">
          <el-select v-model="query.employeeData.departmentId"
                     :clearable="true"
                     placeholder="请选择部门">
            <el-option v-for="item in departments.data"
                       :key="item.departmentId"
                       :label="item.departmentName"
                       :value="item.departmentId" />
          </el-select>
        </el-col>

        <el-col :span="6">
          <el-select v-model="query.employeeData.gender"
                     :clearable="true"
                     placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-col>

        <el-col :span="6">
          <el-button type="primary" @click="getEmployeeData(query.employeeData)">搜索</el-button>
        </el-col>-->

  </el-row>
  <el-table :data="tableData.data" style="width: 100%;margin-top: 20px">

    <el-table-column label="序号" type="index" width="80" align="center">
    </el-table-column>

    <el-table-column label="姓名" prop="patientName" width="100" align="center">
    </el-table-column>


    <el-table-column label="就诊医生" prop="employeeName" width="100" align="center">
    </el-table-column>

    <el-table-column label="身份证" prop="identity" width="200" align="center">
    </el-table-column>

    <el-table-column label="是否住院" prop="description.ifInHospital" width="80" align="center">
    </el-table-column>

    <el-table-column label="创建日期" width="130px" align="center">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.createTime.slice(0, 10) }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="250px" align="center">
      <template #default="scope">
        <el-button
          style="width: 60px;"
          size="small"
          @click="handleMsg(scope.row)"
        >详细信息
        </el-button>

<!--        <el-button
          style="width: 60px;"
          size="small"
          @click="handleEdit(scope.row)"
        >修改
        </el-button>-->
        <el-button
          style="width: 60px;"
          size="small"
          type="danger"
          v-model:current-page="query.SeeDoctorData.pages"
          v-model:age-sizes="query.SeeDoctorData.size"
          @click="handleDelete(scope.row)"
        >删除
        </el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <div>
    <el-pagination
      small
      layout="total, prev, pager, next, jumper"
      :total="tableData.total"
      class="pagiantion "
      @current-change="pageChange"
      v-model:current-page="query.SeeDoctorData.pages"
      v-model:page-size="query.SeeDoctorData.size"
    />
  </div>


  <el-dialog v-model="outerVisible" title="详细信息" width="800">
    <h3>信息</h3>
    <p class="msg">{{ outerVisibleData.msg }}</p>
    <h3>药品信息</h3>
    <el-table :data="outerVisibleData.data" style="width: 100%;margin-top: 20px">
      <el-table-column label="序号" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column label="药品名称" prop="medicineName" width="80" align="center">
      </el-table-column>
      <el-table-column label="数量" prop="count" width="80" align="center">
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="js" setup>
import { Timer } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
import { deleteSeeDoctor, getSeeDoctor } from "@/utils/SeeDoctorRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { deleteRegistration } from "@/utils/RegistrationRequest";

const router = useRouter();

//弹窗
const outerVisible = ref(false);

//弹出数据
const outerVisibleData = reactive(
  {
    msg: "",
    data: []
  }
);

//展示数据
const tableData = reactive({
  data: [],
  total: 0,
  current: 1, //当前页数
  size: 2  //每页显示几条数据
});
const departments = reactive({
  data: [
    {
      departmentName: "骨科",
      departmentId: "0"
    },
    {
      departmentName: "皮肤科",
      departmentId: "1"
    },
    {
      departmentName: "内科",
      departmentId: "2"
    }
  ]
});
//请求参数
const query = reactive({
  SeeDoctorData: {
    "createTime": "",
    "description": {
      "ifInHospital": "否",
      "list": [],
      "msg": ""
    },
    "employeeId": "",
    "patientId": 0,
    "seeDoctorId": 0,
    "updateTime": "",
    "pages": tableData.current,
    "size": tableData.size
  }
});


//组件加载时触发
onMounted(() => {
  getSeeDoctorData(query.SeeDoctorData);
});

//获取数据
const getSeeDoctorData = async (requestData) => {
  let res = await getSeeDoctor(requestData);
  tableData.data = res.data;
  tableData.total = res.total;
  tableData.current = res.current;
};

//分页的页码变化时触发
const pageChange = () => {
  // console.log(query.employeeData.pages);
  getSeeDoctorData(query.SeeDoctorData);
};

//修改回调
const handleEdit = (row) => {
  // router.push({
  //   path: "/home/updatemps",
  //   query: { id: row.seeDoctorId }
  // });
};

//弹窗回调
const handleMsg = (row) => {
  outerVisible.value = true;
  outerVisibleData.msg = row.description.msg;
  outerVisibleData.data = row.description.list;
};

//删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    "确定要删除吗?",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(async () => {
      let res = await deleteSeeDoctor(row.seeDoctorId);
      if (res.data) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      } else {
        ElMessage({
          type: "error",
          message: "删除失败"
        });
      }
      getSeeDoctorData(query.SeeDoctorData);

    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

</script>

<style scoped>
:global(.el-dialog__body) {
  padding: 10px;
}
.msg{
  margin-left: 20px;
  font-size: 15px;
}
</style>